<template>
  <div class="card-container">
    <router-link v-for="dog in dogs" :key="dog.id" :to="{ name: 'Detail', params: { id: dog.id } }" class="card">
      <div class="card-wrapper">
        <div class="image-container">
          <img :src="dog.picture" :alt="dog.title" class="card-image" />
        </div>
        <div class="card-content">
          <h3 class="title">{{ dog.title }}</h3>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, computed } from 'vue';
import { useAnimalStore } from '../stores/animalStore';

export default defineComponent({
  name: 'CardGrid',
  setup() {
    const animalStore = useAnimalStore();
    const loading = ref(true);
    
    // 使用 computed 确保 dogs 是响应式的
    const dogs = computed(() => animalStore.dogs);

    // 确保在组件挂载时获取数据（如果需要）
    onMounted(async () => {
      try {
        await animalStore.fetchDogs(); // 假设有一个 fetchDogs 方法用于获取数据
        loading.value = false;
      } catch (error) {
        loading.value = false;
      }
    });

    const likeItem = (dog) => {
    };

    return {
      dogs,
      likeItem,
      loading,
    };
  },
});
</script>

<style scoped lang="less">
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 20px;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 100%; /* 确保卡片高度一致 */

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

    .card-image {
      transform: scale(1.05);
    }
  }

  .card-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .image-container {
    width: 100%;
    height: 200px; /* 固定图片容器高度 */
    overflow: hidden;
    flex-shrink: 0; /* 防止图片容器收缩 */
  }

  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填充容器 */
    transition: transform 0.5s ease;
  }

  .card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .title {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      color: #333;
    }
  }
}

.loading {
  text-align: center;
  padding: 20px;
  font-size: 1.2rem;
  color: #666;
}
</style>